<template>
  <div id="ltyzt"></div>
</template>

<script>
import { defineComponent, ref, onMounted, nextTick, computed } from "vue";
export default defineComponent({
  name: "Ltyzt",
});
</script>
<script setup>
// 引入
import * as echarts from "echarts";
// data
const ltyztData = ref([
  {
    name: "COD",
    num: 25,
  },
  {
    name: "TDS",
    num: 20,
  },
  {
    name: "叶绿素",
    num: 17,
  },
  {
    name: "溶解氧",
    num: 15,
  },
  {
    name: "浊度",
    num: 12,
  },
  {
    name: "温度",
    num: 10,
  },
  {
    name: "PH",
    num: 8,
  },
  {
    name: "电导率",
    num: 5,
  },
]);

// xAxis Data
const xAxisData = computed(() => {
  let retArr = [];
  ltyztData.value.forEach((item) => {
    retArr.push(item.name);
  });
  return retArr;
});

// num Data
const numData = computed(() => {
  let retArr = [];
  ltyztData.value.forEach((item) => {
    retArr.push(item.num);
  });
  return retArr;
});

// zBar MarkPoint Data Func
const zBarMarkPointDataComp = computed(() => {
  let symbolImage =
    "image://https://wangweilun-1306462865.cos.ap-nanjing.myqcloud.com/buka_img/topBd.png";
  let retArr = [];
  ltyztData.value.forEach((item, index) => {
    let objT = {};
    let objB = {};
    objT.symbol = symbolImage;
    objB.symbol = symbolImage;
    objT.xAxis = index;
    objB.xAxis = index;
    objT.yAxis = item.num;
    objB.yAxis = item.num - 0.6;
    retArr.push(objT);
    retArr.push(objB);
  });
  console.log(retArr);
  return retArr;
});

// 初始化函数
const ltyztInit = async () => {
  let dom = document.getElementById("ltyzt");
  let ltyztChart = echarts.init(dom);
  let option = {
    backgroundColor: "#0c2039",
    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
        textStyle: {
          color: "#fff",
        },
      },
    },
    grid: {
      borderWidth: 0,
      top: "10%",
      bottom: "12%",
      textStyle: {
        color: "#fff",
      },
    },
    calculable: true,
    xAxis: [
      {
        type: "category",
        axisLine: {
          lineStyle: {
            color: "#ffffff",
            fontSize: 15,
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 0,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#ffffff",
          },
        },
        data: xAxisData.value,
      },
    ],
    yAxis: {
      type: "value",
      axisLine: {
        show: false,
        lineStyle: {
          color: "#1C82C5",
        },
      },

      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(4, 187, 255, .2)",
          type: "dashed",
        },
      },
      axisLabel: {
        textStyle: {
          color: "#fff",
          fontSize: "13px",
        },
      },
      axisTick: {
        show: false,
      },
    },

    series: [
      {
        name: "",
        type: "bar",
        stack: "总量",
        barMaxWidth: 24,
        barGap: "10%",
        itemStyle: {
          normal: {
            show: true,
            color: new echarts.graphic.LinearGradient(
              0,
              0,
              0,
              1,
              [
                {
                  offset: 0,
                  color: "rgba(255, 153, 0, 0.3)",
                },
                {
                  offset: 1,
                  color: "rgba(255, 122, 0, 0)",
                },
              ],
              false
            ),
            barBorderRadius: 0,
          },
        },
        markPoint: {
          emphasis: {
            disabled: true,
          },
          data: zBarMarkPointDataComp.value,
          symbolSize: [24, 9],
          label: {
            show: false,
          },
        },
        data: numData.value,
      },
      /* 顶部圆柱配置 ------------------------------------------------------------- */
      {
        name: "顶部圆柱上截面",
        stack: "a",
        type: "pictorialBar",
        symbolSize: [24, 12],
        symbolOffset: [0, -7],
        z: 1,
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: function (params) {
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: "rgba(255, 236, 137, 1)",
                },
                {
                  offset: 0,
                  color: "rgba(255, 92, 0, 1)",
                },
              ]);
            },
            borderRadius: 0,
          },
        },
        symbolPosition: "end",
        data: numData.value,
      },
      {
        name: "顶部圆柱下截面",
        stack: "b",
        type: "pictorialBar",
        symbolSize: [24, 12],
        symbolOffset: [0, -5],
        z: 1,
        tooltip: {
          show: false,
        },
        itemStyle: {
          normal: {
            color: function (params) {
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 1,
                  color: "rgba(255, 236, 137, 1)",
                },
                {
                  offset: 0,
                  color: "rgba(255, 92, 0, 1)",
                },
              ]);
            },
          },
        },
        symbolPosition: "end",
        data: numData.value,
      },
    ],
  };
  ltyztChart.setOption(option);
};

// nextTick异步
nextTick(() => {
  ltyztInit();
});
</script>

<style lang="scss" scoped>
#ltyzt {
  width: 30vw;
  height: 30vh;
  background-color: #0a1c34;
}
</style>
